<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人脸对比</title>
    <script src="js/base.js"></script>
</head>
<body>
    <img id="faceImage1" height="100px" width="100px"
        style="border-style: solid;border-color: #000000 ;border-width: 1px"/>
    <img id="faceImage2" height="100px" width="100px"
        style="border-style: solid;border-color: #000000 ;border-width: 1px"/>
    <br>
    <input id="face1" type="file"/>
    <input id="face2" type="file"/>
    <br>
    <button onclick="onMatchClick();">开始对比</button>
    <script>
        let inputFace1=document.getElementById("face1");
        let base64ForFace1;
        inputFace1.onchange=function() {
            let files = inputFace1.files;
            if (files.length > 1) {
                alert("只能选择一张图片");
                return;
            }
            if (files[0]) {
                //将文件生成url
                let srcValue = window.URL.createObjectURL(files[0]);
                document.getElementById("faceImage1").src = srcValue;
                if (typeof FileReader=='undefined'){
                    alert("请使用最新的Google Chrome浏览器");
                    return false;
                }
                let file=files[0];
                let reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onload=function (e) {
                    base64ForFace1=this.result;
                    // console.info("base64:");
                    // console.info(base64);
                    base64ForFace1=base64ForFace1.substring(base64ForFace1.indexOf(",")+1);
                    // console.info("base64:");
                    // console.info(base64);
                }
            }
        };
        let inputFace2=document.getElementById("face2");
        let base64ForFace2;
        inputFace2.onchange=function() {
            let files = inputFace2.files;
            if (files.length > 1) {
                alert("只能选择一张图片");
                return;
            }
            if (files[0]) {
                //将文件生成url
                let srcValue = window.URL.createObjectURL(files[0]);
                document.getElementById("faceImage2").src = srcValue;
                if (typeof FileReader=='undefined'){
                    alert("请使用最新的Google Chrome浏览器");
                    return false;
                }
                let file=files[0];
                let reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onload=function (e) {
                    base64ForFace2=this.result;
                    // console.info("base64:");
                    // console.info(base64);
                    base64ForFace2=base64ForFace2.substring(base64ForFace2.indexOf(",")+1);
                    // console.info("base64:");
                    // console.info(base64);
                }
            }
        };
        //把两个人脸对应的字符串传给服务器
        function  onMatchClick() {
            let json={};
            json.face1=base64ForFace1;
            json.face2=base64ForFace2;
            let method="post";
            let url="http://localhost:9003/qf/face/match";
            $.rest(method,url,json,function (r) {
                if (r.ok){
                    alert("这两个人有"+r.result.score+"%的可能是同一个人");
                }
            });
        }
    </script>

</body>
</html>